<template>
  <div class="app-container">
    <el-row>
      <el-col :span="8">
        <el-input v-model="form.bridgeName" placeholder="这里填入桥梁名称" suffix-icon="el-icon-edit el-input__icon"></el-input>
      </el-col>
    </el-row>
    <el-tabs style="margin-top: 15px" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="内容信息" name="first">
        <el-form ref="form" :model="form" :rules="rules" label-width="105px">
          <el-row>
            <el-col :span="16">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="桥梁编码:" prop="bridgeNum">
                    <el-input placeholder="" v-model="form.bridgeNum">
                      <template slot="prepend">{{ bridgeNumBegin }}</template>
                    </el-input>
                    <!--                    <el-input v-model="form.bridgeNum" disabled />-->
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="10">
                  <el-form-item :label="bridgeNameLable" prop="bridgeName">
                    <el-input v-model="form.bridgeName" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXC'].includes(bridgeType)">
                  <el-form-item :label="bridgeAliasLable" prop="bridgeAlias">
                    <el-input v-model="form.bridgeAlias" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXC', 'XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="桥梁地名名称:" prop="bridgePlaceName">
                    <el-input v-model="form.bridgePlaceName" />
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- <el-row v-if="['GDXS'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="桥梁状态:" prop="bridgeStatus">
                    <el-radio-group v-model="form.bridgeStatus">
                      <el-radio label="1">正常</el-radio>
                      <el-radio label="2">消失</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row> -->

              <el-row v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="维度:" prop="lat">
                    <el-input v-model="form.lat" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="经度:" prop="lng">
                    <el-input v-model="form.lng" disabled />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="起点连接道路:" prop="startConnectRoad">
                    <el-input v-model="form.startConnectRoad" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="['XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="终点连接道路:" prop="endConnectRoad">
                    <el-input v-model="form.endConnectRoad" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="16">
                  <el-form-item label="所属区域:" prop="localtion">
                    <span v-show="isWithMap"> 省 </span>
                    <el-input v-show="isWithMap" class="privoceInline" v-model="form.province"
                      :disabled="isWithMap"></el-input>
                    <el-cascader v-show="!isWithMap" :options="regionData" v-model="selectedOptions"
                      @change="handleChange" style="width: 400px" placeholder="请选择省市区">
                    </el-cascader>
                    <span v-show="isWithMap"> 市</span>
                    <el-input class="privoceInline" v-model="form.city" v-show="isWithMap" :disabled="isWithMap" />
                    <span v-show="isWithMap"> 行政区</span><el-input class="privoceInline" v-model="form.county"
                      v-show="isWithMap" :disabled="isWithMap" />
                    <el-checkbox style="margin-left: 6px" v-model="isWithMap">地图获取</el-checkbox>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="10">
                  <el-form-item label="材质:" prop="material">
                    <el-select v-model="form.material" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_material" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="古代桥梁类型" prop="oldBridgeType">
                    <el-select v-model="form.oldBridgeType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_old_bridge_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSSG', 'XDCSQG', 'XDCSDD'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="环路所在位置:" prop="loopLocation">
                    <el-select v-model="form.loopLocation" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_loop_location" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <template v-if="bridgeType == 'GDXC'">
                  <el-col :span="10">
                    <el-form-item label="桥梁走向:" prop="bridgeDirection">
                      <el-input v-model="form.bridgeDirection" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="跨越障碍类型:" prop="obstacleType">
                      <el-select v-model="form.obstacleType" placeholder="请选择跨越类型" clearable>
                        <el-option v-for="dict in dict.type.obstacle_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
                <template v-else-if="['GDXS'].includes(bridgeType)">
                  <el-col :span="16">
                    <el-form-item label="跨越障碍类型:" prop="obstacleType">
                      <el-select v-model="form.obstacleType" placeholder="请选择跨越类型" clearable>
                        <el-option v-for="dict in dict.type.obstacle_type" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
                <template v-else-if="['XDCSTQ', 'XDCSDD'].includes(bridgeType)">
                  <el-form-item label="跨越道路或地物名称:" prop="obstacleType">
                    <el-input v-model="form.obstacleType" />
                  </el-form-item>
                </template>
              </el-row>
              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="10">
                  <el-form-item label="拱碹类型:" prop="archType">
                    <el-select v-model="form.archType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_arch_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="拱碹排列方式:" prop="archArrange">
                    <el-select v-model="form.archArrange" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_arch_arrange" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="10">
                  <el-form-item label="桥台类型:" prop="abutmentType">
                    <el-select v-model="form.abutmentType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_abutment_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="分水:" prop="divideWater">
                    <el-select v-model="form.divideWater" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_divide_water" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="16" v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                  <el-form-item label="营建年代:" prop="constructYear">
                    <el-select style="width: 100px" v-model="form.constructYear" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.construct_year" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                    <el-input style="width: 350px; margin-left: 5px" v-model="form.constructYearTxt"
                      placeholder=""></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="bridgeType == 'GDXS'">
                <el-col :span="16">
                  <el-form-item label="消失年代:" prop="disappearYear">
                    <el-select style="width: 100px" v-model="form.disappearYear" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.construct_year" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                    <el-input style="width: 350px; margin-left: 5px" v-model="form.disappearYearTxt"
                      placeholder=""></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="16">
                  <el-form-item label="保护级别:" prop="protectionLevel">
                    <el-select v-model="form.protectionLevel" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_protection_level" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="10">
                  <el-form-item label="所有权人:" prop="owner">
                    <el-input v-model="form.owner" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="管理使用者:" prop="manageUser">
                    <el-input v-model="form.manageUser" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="10">
                  <el-form-item label="现状用途:" prop="currentUse">
                    <el-select v-model="form.currentUse" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_current_use" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="保存现状" prop="saveStatus">
                    <el-select v-model="form.saveStatus" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_save_status" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="16">
                  <el-form-item label="维修(朝代和年代):" prop="repairYear">
                    <el-input v-model="form.repairYear" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="
                ['GDXC', 'XDCSSG', 'XDCSQG', 'XDCSTQ', 'XDCSDD'].includes(
                  bridgeType
                )
              ">
                <el-col :span="10">
                  <el-form-item :label="bridgeLengthLable" prop="bridgeLength">
                    <el-input v-model="form.bridgeLength" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['XDCSSG', 'XDCSQG'].includes(bridgeType)">
                  <el-form-item label="桥梁宽度(m):" prop="bridgeWidth">
                    <el-input v-model="form.bridgeWidth" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXC'].includes(bridgeType)">
                  <el-form-item label="中宽:" prop="bridgeSpan">
                    <el-input v-model="form.bridgeSpan" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXC'].includes(bridgeType)">
                  <el-form-item label="桥梁孔数:" prop="bridgeHoles">
                    <el-input v-model="form.bridgeHoles" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="
                  ['XDCSSG', 'XDCSQG', 'XDCSTQ', 'XDCSDD'].includes(
                    bridgeType
                  )
                ">
                  <el-form-item :label="bridgeHeightLable" prop="bridgeHeight">
                    <el-input v-model="form.bridgeHeight" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="桥梁面积(㎡):" prop="bridgeArea">
                    <el-input v-model="form.bridgeArea" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="跨越地面类型:" prop="obstacleType">
                    <el-select v-model="form.obstacleType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.obstacle_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="结构型式:" prop="structType">
                    <el-select v-model="form.structType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_struct_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="设计载荷:" prop="designLoad">
                    <el-select v-model="form.designLoad" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_design_load" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSTQ'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="天桥类型:" prop="overpassType">
                    <el-select v-model="form.overpassType" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_overpass_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSDD'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="有无照明:" prop="islighting">
                    <el-select v-model="form.islighting" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_is_lighting" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['XDCSDD'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="行政主管单位:" prop="manageUser">
                    <el-input v-model="form.manageUser" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="
                ['XDCSSG', 'XDCSQG', 'XDCSTQ', 'XDCSDD'].includes(bridgeType)
              ">
                <el-col :span="16">
                  <el-form-item label="养护单位:" prop="maintUnit">
                    <el-input v-model="form.maintUnit" />
                    <!-- <el-select
                      v-model="form.maintUnit"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="dict in dict.type.sys_maint_unit"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select> -->
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="16">
                  <el-form-item label="标志碑与说明碑:" prop="signsAndMonuments">
                    <el-input v-model="form.signsAndMonuments" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="bridgeType == 'GDXC'">
                <el-col :span="16">
                  <el-form-item label="标志碑与说明碑图片:" prop="signsAndMonumentsFiles">
                    <ImageUpload v-model="form.signsAndMonumentsFiles"></ImageUpload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                <el-col :span="20">
                  <el-form-item label="文献名称:" prop="documentName">
                    <el-input v-model="form.documentName" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-ro v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                <el-col :span="20">
                  <el-form-item label="文献内容:" prop="documentDesc">
                    <el-input v-model="form.documentDesc" />
                  </el-form-item>
                </el-col>
              </el-ro>
              <el-row v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="记录人:" prop="documentCreateBy">
                    <el-input v-model="form.documentCreateBy" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                  <el-form-item label="日期:" prop="documentCreateTime">
                    <el-date-picker v-model="form.documentCreateTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="所在河道:" prop="riverChannel">
                    <el-input v-model="form.riverChannel" />
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXS', 'GDXC'].includes(bridgeType)">
                  <el-form-item label="栏板:" prop="sidePanel">
                    <el-select v-model="form.sidePanel" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_side_panel" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXC'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="区位:" prop="regionalLocation">
                    <el-select v-model="form.regionalLocation" placeholder="请选择" clearable>
                      <el-option v-for="dict in dict.type.sys_regional_location" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10" v-if="['GDXC'].includes(bridgeType)">
                  <el-form-item label="保存状况:" prop="preservationStatus">
                    <el-input v-model="form.preservationStatus" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXC'].includes(bridgeType)">
                <el-col :span="10" v-if="['GDXC'].includes(bridgeType)">
                  <el-form-item label="破坏现象:" prop="signsDamage">
                    <el-input v-model="form.signsDamage" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXS'].includes(bridgeType)">
                <el-col :span="10">
                  <el-form-item label="位置:" prop="position">
                    <el-input v-model="form.position" />
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="河流:" prop="river">
                    <el-input v-model="form.river" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row v-if="['GDXC', 'XDCSSG', 'XDCSQG'].includes(bridgeType)">
                <el-col :span="16">
                  <el-form-item label="备注:" prop="remark">
                    <el-input type="textarea" v-model="form.remark" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地图选点:" prop="mapSelect">
                <el-input style="margin-bottom: 5px" v-model="keyword" placeholder="请输入地点"></el-input>
                <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"
                  @click="mapClick">
                  <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false"></bm-local-search>
                  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                    :autoLocation="true"></bm-geolocation>
                  <bm-marker :position="markerPoint" animation="BMAP_ANIMATION_BOUNCE" :clicking="false">
                  </bm-marker>
                </baidu-map>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="添加附件:" prop="bridgeFiles">
                <!-- <Ueditor v-model="form.bridgeContent"></Ueditor> -->
                <FileUpload v-model="form.bridgeFiles"></FileUpload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="相关阅读" name="second">
        <el-card>
          <el-button type="primary" icon="el-icon-plus" @click="addRelatedRead">添加相关阅读</el-button>
          <el-table :data="relatedReadList" style="margin-top: 15px">
            <el-table-column label="名称" align="center" prop="dynamicTitle" />
            <el-table-column label="概述" align="center" prop="dynamicSubTitle" show-overflow-tooltip />
            <el-table-column label="发布时间" align="center" prop="pushTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.pushTime, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="相关资源" name="third">
        <el-card>
          <el-button type="primary" icon="el-icon-plus" @click="addRelatedResource">添加相关资源</el-button>
          <el-table :data="relatedResourceList" style="margin-top: 15px">
            <el-table-column label="资源ID" align="center" prop="resourceId" />
            <el-table-column label="名称" align="center" prop="resourceName" />
            <el-table-column label="资源类型" align="center" prop="resourceType">
              <template slot-scope="scope">
                {{ scope.row.resourceType == "image" ? "图片" : "视频" }}
              </template>
            </el-table-column>
            <el-table-column label="发布时间" align="center" prop="createTime" />
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <div style="margin-top: 5px; text-align: right">
      <el-button type="primary" @click="submitForm('0')">暂 存</el-button>
      <el-button @click="submitForm('1')">发 布</el-button>
    </div>

    <!-- 添加或修改动态对话框 -->
    <el-dialog title="相关阅读" :visible.sync="readOpen" width="1200px" append-to-body v-dialog-drag
      :close-on-click-modal="false">
      <el-row>
        <el-col :span="4">
          <div>
            <div class="news">
              <div class="content">相关阅读</div>
              <el-divider class="divider"></el-divider>
              <div v-for="item in dynamicTypeList" :key="item.dynamicTypeId">
                <div class="txtButton" @click="dynamicTypeChange(item.dynamicTypeId)">
                  {{ item.dynamicTypeName }}
                </div>
                <el-divider class="divider"></el-divider>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="14" :offset="9">
              <el-input v-model="dynamicKeywords" placeholder="请输入搜索内容" suffix-icon="el-icon-search"
                @change="getDynamicList"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-table :v-loading="dynamicLoading" :data="dynamicList" style="margin-top: 15px; margin-left: 5px"
              @selection-change="dynamicSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="名称" align="center" prop="dynamicTitle" show-overflow-tooltip />

              <el-table-column label="概述" align="center" prop="dynamicSubTitle" show-overflow-tooltip />
              <el-table-column label="发布时间" align="center" prop="pushTime" />
            </el-table>
            <pagination v-show="dynamicTotal > 0" :total="dynamicTotal" :page.sync="dynamicQueryParam.pageNum"
              :limit.sync="dynamicQueryParam.pageSize" @pagination="getDynamicList" />
          </el-row>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDynamicRelateRead">添 加</el-button>
        <el-button @click="readOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加相关资源" :visible.sync="resourceOpen" width="1200px" append-to-body v-dialog-drag
      :close-on-click-modal="false">
      <el-row>
        <el-col :span="4">
          <div>
            <div class="news">
              <div class="content">相关资源</div>
              <el-divider class="divider"></el-divider>
              <div v-for="item in resourceTypeList" :key="item.resourceTypeId">
                <div class="txtButton" @click="resourceTypeChange(item.resourceTypeId)">
                  {{ item.resourceTypeName }}
                </div>
                <el-divider class="divider"></el-divider>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="14" :offset="9">
              <el-input v-model="resuorceKeywords" placeholder="请输入搜索内容" suffix-icon="el-icon-search"
                @change="getResourceList"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-table :v-loading="dynamicLoading" :data="resourceList" style="margin-top: 15px; margin-left: 5px"
              @selection-change="resourceSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column align="center" label="资源ID" prop="resourceId" />
              <el-table-column label="名称" align="center" prop="resourceName" show-overflow-tooltip />
              <el-table-column label="资源类型" align="center" prop="resourceType">
                <template slot-scope="scope">
                  {{ scope.row.resourceType == "image" ? "图片" : "视频" }}
                </template>
              </el-table-column>
              <!-- <el-table-column label="资源详情" align="center">
                <template slot-scope="scope">
                  <image-preview :src="scope.row.resourceUrl" :width="50" :height="50" />
                </template>
              </el-table-column> -->
            </el-table>
          </el-row>
          <pagination style="height: 90px" v-show="resourceTotal > 0" :total="resourceTotal"
            :page.sync="resourceQueryParam.pageNum" :limit.sync="resourceQueryParam.pageSize"
            @pagination="getResourceList" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addRelateResource">添 加</el-button>
        <el-button @click="resourceOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  addList,
  updateList,
  getRelateReadList,
  getBridgeNumByBridgeType,
  getResourceByType,
  getRelateResourceList,
} from "@/api/bussiness/list";
import { listDynamicType } from "@/api/bussiness/dynamicType";
import { listDynamic } from "@/api/bussiness/dynamic";
import { regionData, codeToText } from "element-china-area-data";

import Ueditor from "@/components/Ueditor";
export default {
  dicts: [
    "sys_bridge_age",
    "publish_status",
    "obstacle_type",
    "construct_year",
    "sys_protection_level",
    "sys_old_bridge_type",
    "sys_material",
    "sys_current_use",
    "sys_save_status",
    "sys_arch_type",
    "sys_arch_arrange",
    "sys_abutment_type",
    "sys_divide_water",
    "sys_struct_type",
    "sys_design_load",
    "sys_maint_unit",
    "sys_loop_location",
    "sys_overpass_type",
    "sys_is_lighting",
    "sys_side_panel",
    "sys_regional_location",
  ],
  components: {
    Ueditor,
  },
  data() {
    return {
      activeName: "first",
      bridgeType: undefined,
      bridgeNumBegin: "",
      form: {
        bridgeName: "",
        lng: "",
        lat: "",
        province: "",
        city: "",
        county: "",
        checkListId: "",
        bridgeAge: "0",
        relatedReadList: [],
      },
      rules: {
        bridgeNum: [
          { required: true, message: "桥梁编号不能为空", trigger: "blur" },
        ],
        bridgeName: [
          { required: true, message: "桥梁名称不能为空", trigger: "blur" },
        ],
        // lng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
        // lat: [{ required: true, message: "维度不能为空", trigger: "blur" }],
        province: [{ required: true, message: "省不能为空", trigger: "blur" }],
        city: [{ required: true, message: "市不能为空", trigger: "blur" }],
        county: [
          { required: true, message: "乡/行政区不能为空", trigger: "blur" },
        ],
        bridgeAge: [
          { required: true, message: "桥梁年代不能为空", trigger: "change" },
        ],
        bridgeDesc: [
          { required: true, message: "桥梁描述不能为空", trigger: "blur" },
        ],
        bridgeContent: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
      center: { lng: 0, lat: 0 },
      zoom: 3,
      keyword: "",
      map: "",
      markerPoint: { lng: 0, lat: 0 },
      myGeo: "",
      openType: "add",
      relatedReadList: [],
      relatedResourceList: [],
      readOpen: false,
      resourceOpen: false,
      dynamicTypeList: [],
      dynamicKeywords: "",
      dynamicTotal: 0,
      dynamicLoading: false,
      dynamicList: [],
      dynamicQueryParam: {
        pageNum: 1,
        pageSize: 10,
      },
      checkDynamicIds: [],
      isWithMap: true,
      resourceTypeList: [
        {
          resourceTypeId: "image",
          resourceTypeName: "图片资源",
        },
        { resourceTypeId: "video", resourceTypeName: "视频资源" },
      ],
      resuorceKeywords: "",
      resourceTotal: 0,
      resourceLoading: false,
      resourceList: [],
      resourceQueryParam: {
        pageNum: 1,
        pageSize: 10,
      },
      checkResourceIds: [],
      regionData,
      codeToText,
      selectedOptions: [],
      bridgeNameLable: "设计名称:",
      bridgeAliasLable: "桥梁别名:",
      bridgeLengthLable: "全长(m):",
      bridgeHeightLable: "桥梁净高(m)",
    };
  },
  created() {
    this.bridgeType = this.$route.query.bridgeType;
    this.bridgeTypeName = this.$route.query.bridgeTypeName;
    this.checkListId = this.$route.query.checkListId;
    if (this.checkListId) {
      this.getBridgeInfo();
      this.getRelateReadList();
      this.getRelateResourceList();
    } else {
      //获取桥梁的编号根据桥梁的类型自动生成
      this.getBridgeNum(this.bridgeType);
    }
    this.initBridgeLables();
    this.getDynamicTypeInfo();
  },
  mounted() {
    console.log("执行mounted方法", this.bridgeType);
  },
  methods: {
    getBridgeNum() {
      if (this.bridgeType == "GDXS") {
        this.bridgeNumBegin = "GD-XS-";
      } else if (this.bridgeType == "GDXC") {
        this.bridgeNumBegin = "GD-XC-";
      } else if (this.bridgeType == "XDCSSG") {
        this.bridgeNumBegin = "XD-CS-SG-";
      } else if (this.bridgeType == "XDCSQG") {
        this.bridgeNumBegin = "XD-CS-QG-";
      } else if (this.bridgeType == "XDCSTQ") {
        this.bridgeNumBegin = "XD-CS-TQ-";
      } else if (this.bridgeType == "XDCSDD") {
        this.bridgeNumBegin = "XD-CS-DD-";
      }
    },
    //初始话一些lable
    initBridgeLables() {
      if (this.bridgeType == "GDXS") {
        this.bridgeNameLable = "桥梁名称:";
      } else if (this.bridgeType == "GDXC") {
        this.bridgeNameLable = "公布名称:";
        this.bridgeAliasLable = "古桥名称:";
      } else if (this.bridgeType == "XDCSSG") {
      } else if (this.bridgeType == "XDCSQG") {
      } else if (this.bridgeType == "XDCSTQ") {
        this.bridgeNameLable = "天桥名称";
        this.bridgeLengthLable = "天桥长度(m):";
        this.bridgeHeightLable = "天桥净高(m):";
      } else if (this.bridgeType == "XDCSDD") {
        this.bridgeNameLable = "地道名称:";
        this.bridgeLengthLable = "地道长度(m):";
        this.bridgeHeightLable = "地道净高(m):";
      }
    },
    async getBridgeInfo() {
      let result = await getList(this.checkListId);
      if (result.code == 200) {
        this.form = result.data;
        this.getBridgeNum();
        if (this.bridgeType == "GDXS") {
          this.form.bridgeNum = this.form.bridgeNum.replace("GD-XS-", "");
        } else if (this.bridgeType == "GDXC") {
          this.form.bridgeNum = this.form.bridgeNum.replace("GD-XC-", "");
        } else if (this.bridgeType == "XDCSSG") {
          this.form.bridgeNum = this.form.bridgeNum.replace("XD-CS-SG-", "");
        } else if (this.bridgeType == "XDCSQG") {
          this.form.bridgeNum = this.form.bridgeNum.replace("XD-CS-QG-", "");
        } else if (this.bridgeType == "XDCSTQ") {
          this.form.bridgeNum = this.form.bridgeNum.replace("XD-CS-TQ-", "");
        } else if (this.bridgeType == "XDCSDD") {
          this.form.bridgeNum = this.form.bridgeNum.replace("XD-CS-DD-", "");
        }
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getDynamicTypeInfo() {
      var res = await listDynamicType();
      if (res.code == 200) {
        this.dynamicTypeList = res.rows;
      }
    },
    handler({ BMap, map }) {
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
      this.map = map;
      this.myGeo = new BMap.Geocoder();
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        this.center.lng = r.point.lng;
        this.center.lat = r.point.lat;
        this.markerPoint.lng = r.point.lng;
        this.markerPoint.lat = r.point.lat;
      });
    },
    mapClick({ type, point }) {
      this.form.lat = point.lat;
      this.form.lng = point.lng;
      this.markerPoint.lng = point.lng;
      this.markerPoint.lat = point.lat;
      //根据坐标值逆解析获取地址详细的信息
      this.myGeo.getLocation(point, (result) => {
        if (result) {
          this.form.province = result.addressComponents.province;
          this.form.city = result.addressComponents.city;
          this.form.county = result.addressComponents.district;
        }
      });
    },
    submitForm(status) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.status = status;
          this.form.bridgeType = this.bridgeType;
          this.form.relatedReadList = this.relatedReadList.map(
            (item) => item.dynamicId
          );
          this.form.relatedResourceList = this.relatedResourceList;
          if (this.form.checkListId) {
            updateList(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$store.dispatch("tagsView/delCachedView", { name: "List" });
              this.$nextTick(() => {
                const obj = { path: "/business/list" };
                this.$tab.closeOpenPage(obj);
              });
            });
          } else {
            addList(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$store.dispatch("tagsView/delCachedView", { name: "List" });
              this.$nextTick(() => {
                const obj = { path: "/business/list" };
                this.$tab.closeOpenPage(obj);
              });
            });
          }
        }
      });
    },
    async getRelateReadList() {
      let res = await getRelateReadList(this.checkListId);
      if (res.code == 200) {
        this.relatedReadList = res.data;
      }
    },
    async getRelateResourceList() {
      let res = await getRelateResourceList(this.checkListId);
      if (res.code == 200) {
        this.relatedResourceList = res.data;
      }
    },
    async getDynamicList() {
      this.dynamicLoading = true;
      this.dynamicQueryParam.dynamicTitle = this.dynamicKeywords;
      this.dynamicQueryParam.excludeIds = this.relatedReadList.map(
        (item) => item.dynamicId
      );
      let res = await listDynamic(this.dynamicQueryParam);
      if (res.code == 200) {
        this.dynamicList = res.rows;
        this.dynamicTotal = res.total;
        this.dynamicLoading = false;
      }
    },
    addRelatedRead() {
      this.readOpen = true;
      this.getDynamicList();
    },
    addRelatedResource() {
      this.resourceOpen = true;
      this.resourceQueryParam = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getResourceList();
    },
    dynamicTypeChange(dynamicTypeId) {
      this.dynamicQueryParam.dynamicTypeId = dynamicTypeId;
      this.getDynamicList();
    },
    //资源类型切换
    resourceTypeChange(resourceTypeId) {
      this.resourceQueryParam.resourceType = resourceTypeId;
      this.resourceQueryParam.pageNum = 1;
      this.resourceQueryParam.pageSize = 10;
      this.getResourceList();
    },
    dynamicSelectionChange(selection) {
      this.checkDynamicIds = selection;
    },
    addDynamicRelateRead() {
      if (!this.checkDynamicIds || this.checkDynamicIds.lenght <= 0) {
        this.$modal.msgWarning("请选择相关阅读");
      }
      this.checkDynamicIds.forEach((ele) => {
        let flag = this.relatedReadList.some(
          (item) => item.dynamicId == ele.dynamicId
        );
        if (!flag) {
          this.relatedReadList.push(ele);
        }
      });
      this.readOpen = false;
    },

    async getResourceList() {
      this.resourceLoading = true;
      this.resourceQueryParam.resourceName = this.resuorceKeywords;
      this.resourceQueryParam.excludeIds = this.relatedResourceList.map(
        (item) => item.resourceId
      );
      let res = await getResourceByType(this.resourceQueryParam);
      if (res.code == 200) {
        this.resourceList = res.rows;
        this.resourceTotal = res.total;
        this.resourceLoading = false;
      }
    },
    resourceSelectionChange(selection) {
      this.checkResourceIds = selection;
    },
    addRelateResource() {
      if (!this.checkResourceIds || this.checkResourceIds.lenght <= 0) {
        this.$modal.msgWarning("请选择相关资源");
      }
      this.checkResourceIds.forEach((ele) => {
        let flag = this.relatedResourceList.some(
          (item) => item.resourceId == ele.resourceId
        );
        if (!flag) {
          this.relatedResourceList.push(ele);
        }
      });
      this.resourceOpen = false;
    },
    handleChange(value) {
      if (value && value.length >= 3) {
        this.form.city = this.codeToText[value[1]];
        this.form.county = this.codeToText[value[2]];
        this.form.province = this.codeToText[value[0]];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.privoceInline {
  display: inline-block;
  width: 120px;
  margin-left: 4px;
}

.bm-view {
  width: 100%;
  height: 250px;
}

.news {
  width: 100%;
  height: 500px;
  background-color: #515151;
  display: flex;
  /* 设置为 Flexbox */
  flex-direction: column;
  padding-top: 50px;
}

.content {
  position: relative;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
}

.txtButton {
  position: relative;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  /* 设置鼠标样式为手型 */
}

.txtButton:hover {
  color: #aec6f6;
  /* 鼠标悬停时的文字颜色 */
}

.divider {
  margin: 9px 0;
}
</style>
